<script type="text/javascript">
	Ext.onReady(function(){

		var usersPropertyGrid = new Ext.ux.Bike.grid.PropertyGrid({
			applyTo: 'users-props-div',
			hidden: false,
			width: 500,
			height: 600,
			operation: '',
			viewConfig : {
						forceFit: true/*,
						scrollOffset: 2*/
			},
			customEditors: {
				'id': new Ext.grid.GridEditor(new Ext.form.Hidden()),
				operation: new Ext.grid.GridEditor(new Ext.form.Hidden())
			},
			propertyNames: {
						login: USERS_TITLE_LOGIN,
						firstName: USERS_TITLE_FIRSTNAME,
						lastName: USERS_TITLE_LASTTNAME
					},

			buttons:[{
				text: USERS_TITLE_SAVE,
				handler: function(){
					usersPropertyGrid.saveHandler();
				}
			},{
				text: USERS_TITLE_CANCEL,
				handler: function(){
					windowForusersPropertyGrid.hide();
					usersPropertyGrid.setSource({});
				}
			}]
		});

		usersPropertyGrid.saveHandler = function(){
				windowForusersPropertyGrid.hide();
				var params = usersPropertyGrid.getSource();
				if('' == params['password']){
					delete params.password;
				}
				params.operation = usersPropertyGrid.operation;
				Ext.Ajax.request({
					url: '/Bike/controllers/data.php?type=users',
					method: 'POST',
					success: function(){
						usersStore.reload(usersStore.lastOptions);
					},
					failure: function(){
						alert('Error')
					},
					params: params
				});
		}

		usersPropertyGrid.setAutoScroll(true);

		var windowForusersPropertyGrid = new Ext.Window({
			applyTo:'users-props-window',
			layout:'fit',
			width:650,
			height:600,
			closeAction:'hide',
			plain: true,
			items: usersPropertyGrid,
			modal: true,
			hidden: true,
			autoShow: false,
			title: USERS_TITLE_EDIT,
			stateful: true
		});

		var usersStore = new Ext.data.JsonStore({
				totalProperty: 'totalCount',
				idProperty: 'id',
				remoteSort: true,
				root: 'data',

				fields: ['login', 'firstName', 'lastName'],
				url: '/Bike/controllers/data.php?type=users'
			});

		var usersGrid = new Ext.grid.GridPanel({
				title: USERS_TITLE_USERS,
				store: usersStore,
				trackMouseOver:true,
				//disableSelection:true,
				loadMask: true,
				contextMenu: new Ext.menu.Menu({
					applyTo: 'users-context-menu',
					items: [{
						id: 'add-users-record',
						text: USERS_TITLE_CREATE
					},{
						id: 'delete-users-record',
						text: USERS_TITLE_DELETE
					}],
					listeners: {
						itemclick: function(item) {
							switch (item.id) {
								case 'add-users-record':
								   usersPropertyGrid.setSource({
										login: '',
										password: '',
										firstName: '',
										lastName: ''
									});
								   	usersPropertyGrid.operation = 'insert';
									windowForusersPropertyGrid.show();
									break;
								case 'delete-users-record':
									var contextRow = item.parentMenu.contextRow;
									usersPropertyGrid.setSource({
										id: contextRow.id
									});
									usersPropertyGrid.operation = 'delete';
									Ext.MessageBox.confirm(USERS_TITLE_WARNING,
														USERS_TITLE_CONFIRMDELETE,
														function(btn){
															if('yes' == btn){
																usersPropertyGrid.saveHandler();
															}
														});
									break;
							}
						}
					}
				}),

				listeners: {
					rowdblclick: function(grid, rowIndex, e){
						var data = grid.getSelectionModel().getSelected().json;
						usersPropertyGrid.setSource({
							id: data.id,
							login: data.login,
							password: '',
							firstName: data.firstName,
							lastName: data.lastName
						});
						usersPropertyGrid.operation = 'update';
						windowForusersPropertyGrid.show();
					},
					rowcontextmenu: function(grid, rowIndex, e) {
						grid.getSelectionModel().selectRow(rowIndex);
						var contextRow = grid.contextMenu;
						contextRow.get('delete-users-record').enable();
						contextRow.contextRow = grid.getSelectionModel().getSelected().json;
						contextRow.showAt(e.getXY());
						e.preventDefault();
					},
					containercontextmenu : function( grid, e ){
						var contextRow = grid.contextMenu;
						contextRow.get('delete-users-record').disable();
						contextRow.showAt(e.getXY());
						e.preventDefault();
					}
				},

				// grid columns
				columns:[{
					header: 'Логин',
					dataIndex: 'login',
					width: 420,
					sortable: true
				},{
					header: 'Имя',
					dataIndex: 'firstName',
					width: 420,
					sortable: true
				},{
					header: 'Фамилия',
					dataIndex: 'lastName',
					width: 420,
					sortable: true
				}],

				// customize view config
				viewConfig: {
					forceFit:true,
					enableRowBody:true,
					showPreview:true
				},

				// paging bar on the bottom
				bbar: new Ext.PagingToolbar({
					pageSize: 20,
					store: usersStore,
					displayInfo: true,
					displayMsg: 'Показанные пользователи {0} - {1} of {2}',
					emptyMsg: 'Нет пользователей для показа',
					items:[
						'-']
				})
			});

			// render it
			usersGrid.render('users-grid-div');
			Ext.getCmp('tabPanel').getActiveTab().addListener(
					'resize', function(){usersGrid.setHeight(document.body.clientHeight-25)}
			);
			usersGrid.setHeight(document.body.clientHeight-25);

			// trigger the data store load
			usersStore.load({params:{start:0, limit:20}});

	});
</script>

<div id="users-grid-div"></div>
<div id="users-props-div"></div>
<div id="users-props-window"></div>
<div id="users-context-menu"></div>